<template>
  <div>
    <el-card>
<el-form>
  <el-row type="flex">
    <el-col :span="8">
  <el-form-item label="快递员账户：" label-width="120px">
    <el-input v-model="page.account" placeholder="请输入快递员账户"/>
  </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="快递员姓名：" label-width="120px">
        <el-input v-model="page.name" placeholder="请输入快递员姓名"/>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="快递员手机号：" label-width="120px">
        <el-input v-model="page.phone" placeholder="请输入快递员手机号"/>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row>
<el-col :span="8">
  <el-form-item label="所属机构：" label-width="120px">

    <TreeSelect
      v-model="page.agentId"
      :normalizer="normalizer"
      :options="treeData"
      placeholder="请选择起始地机构"
      :appendToBody="true"
    />
  </el-form-item>
</el-col>
    <el-col :span="8">
      <el-button type="danger" @click="search">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </el-col>
  </el-row>
</el-form>
    </el-card>
    <el-card>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          type="index"
          label="序号"
          width="180"/>
        <el-table-column
          prop="account"
          label="快递员账户"
          width="180"/>
        <el-table-column
          prop="name"
          label="快递员姓名"
          width="180"/>
        <el-table-column
          prop="mobile"
          label="快递员手机号"/>
      <el-table-column
        prop="agency.name"
        label="所属机构"/>
      <el-table-column
        prop="workStatus"
        label="工作状态">
        <template #default="{row}">
          <el-row type="flex" style="width: 70px" align="middle"  v-if="row.workStatus===0">
            <el-col> <div style="width: 10px;height: 10px;border-radius: 50%;background-color: red "/></el-col>
            <el-col>休息</el-col>
          </el-row>
          <el-row type="flex" style="width: 70px" align="middle"  v-else>
            <el-col> <div style="width: 10px;height: 10px;border-radius: 50%;background-color: #95ec69 "/></el-col>
            <el-col>上班</el-col>
          </el-row>
        </template>

      </el-table-column>
      <el-table-column
        label="操作">
       <template #default="{row}">
<!--         <el-row>{{row}}</el-row>-->
          <el-button type="text" size="small" @click="submit(row.userId,row.name,row.agency.name)">作业范围分配</el-button>
       </template>
      </el-table-column>
      </el-table>
    </el-card>
<!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import TreeSelect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getRangApi } from '@/api/rang'
import { GetListApi } from '@/api/instiution'
export default {
  components: { TreeSelect },
  name: 'range',
  data () {
    return {
      dataList: [],
      agentId: '',
      tableData: [],
      page: {
        page: 1,
        pageSize: 10,
        name: '',
        phone: '',
        account: '',
        agentId: null
      },
      total: 0,
      treeData: []// 机构树  用于搜索
    }
  },
  created () {
    this.getAgentList()
    this.getTreeData()
  },
  methods: {
    async getAgentList () {
      const res = await getRangApi(this.page)
      console.log(res)
      this.tableData = res.data.items
      this.total = +res.data.counts
    },
    // 监听pagesize改变
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
      console.log(this.page.pagesize)
    },
    // 监听pagename改变
    async handleCurrentChange (newNum) {
      this.page.page = newNum
      console.log(this.page.page)
      await this.getAgentList(this.page)
    },
    submit (id, name, name3) {
      this.$router.push({ path: '/branches/MapContent', query: { id: id, name: 'row.name', agencyName: name3 } })
    },
    // 获取机构树
    async getTreeData () {
      const res = await GetListApi()
      this.treeData = JSON.parse(res.data)
      console.log(this.treeData)
    },
    normalizer (node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 搜索
    async search () {
      const res = await this.getAgentList(this.page)
      console.log(res)
    },
    // 重置
    reset () {
      this.page.name = ''
      this.page.phone = ''
      this.page.account = ''
      this.page.agentId = ''
      this.getAgentList()
    }

  }

}
</script>
